<template>
  <div>
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        header-cell-class-name="custom-header"
      >
        <el-table-column prop="seckill_activity_id" label="秒杀活动编号" align="center" />
        <el-table-column prop="seckill_decimal_device_id" label="秒杀医疗设备编号" align="center" />
        <el-table-column prop="original_price" label="原价" align="center" />
        <el-table-column prop="seckill_price" label="秒杀价" align="center" />
        <el-table-column prop="stock" label="秒杀库存" align="center" />
        <el-table-column prop="discount_type" label="优惠方式" align="center">
          <template #default="scope">
            {{ filterDict(scope.row.discount_type, discount_type_mapOptions) || scope.row.discount_type }}
          </template>
        </el-table-column>
        <el-table-column prop="discount_value" label="折扣/特价值" align="center" />
        <el-table-column prop="deckill_device_status" label="状态" align="center">
          <template #default="scope">
            {{ filterDict(scope.row.deckill_device_status, seckill_activity_status_mapOptions) || scope.row.deckill_device_status }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="120">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              style="font-weight:bold;letter-spacing:2px;"
              @click="handleSeckill(scope.row)"
            >
              秒 杀
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAllFromRedis } from '@/api/system/seckill_activity_device'
import { getDictFunc, filterDict } from '@/utils/format'
import { ElMessage } from 'element-plus'

const seckill_activity_status_mapOptions = ref([])
const discount_type_mapOptions = ref([])
const tableData = ref([])

const getTableData = async () => {
  const res = await getAllFromRedis()
  if (res.code === 0) {
    tableData.value = res.data
  }
}

const setOptions = async () => {
  seckill_activity_status_mapOptions.value = await getDictFunc('seckill_activity_status_map')
  discount_type_mapOptions.value = await getDictFunc('discount_type_map')
}

const handleSeckill = (row) => {
  // 这里写你的秒杀逻辑
  ElMessage.success(`参与活动${row.seckill_activity_id}的设备${row.seckill_decimal_device_id}秒杀！`)
}

onMounted(() => {
  setOptions()
  getTableData()
})
</script>

<style scoped>
.custom-header {
  background: #f5f7fa;
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.el-table .el-button--danger {
  background: linear-gradient(90deg, #ff5858 0%, #f09819 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 20px;
  transition: box-shadow 0.2s;
}
.el-table .el-button--danger:hover {
  box-shadow: 0 2px 12px 0 rgba(255, 88, 88, 0.2);
  opacity: 0.9;
}
</style> 